<template>
  <div class="index" v-if="ifAdmin===0">
    <div class="index-div">
      <div class="index-div-div"><img class="index-div-img" src="../../assets/images/index/mdLogo.png" alt=""></div>
      <div class="index-div-div1">
        <p class="index-div-p">专属服务顾问：{{ counselorName }}</p>
        <p class="index-div-p index-div-p1">电话：{{ counselorPhone }}</p>
      </div>
      <div class="index-div-div2">
        <div class="index-div-div3"><img class="index-div-img1" src="../../assets/images/index/xcx.jpg" alt=""></div>
        <p class="index-div-p2">扫一扫进入学员小程序</p>
      </div>
    </div>
    <div class="index-div1">
      <ul>
        <li>
          <p class="index-div1-p">培训人数</p>
          <div class="index-div1-div">
            <h1 class="index-div1-h1">{{ studentNum }}</h1>
            <!--<div class="index-div1-imgDiv">-->
            <!--<div>-->
            <!--<img v-if="topArrow" src="../../assets/images/index/topArrow.png" alt="" class="index-div1-img">-->
            <!--<img v-if="!topArrow" src="../../assets/images/index/botArrow.png" alt="" class="index-div1-img">-->
            <!--</div>-->
            <!--<span>0</span>-->
            <!--</div>-->
          </div>
        </li>
        <li>
          <p class="index-div1-p">待缴费人数</p>
          <div class="index-div1-div">
            <h1 class="index-div1-h1">{{ unPayPeopleNum }}</h1>
            <!--<div class="index-div1-imgDiv">-->
            <!--<div>-->
            <!--<img v-if="topArrow" src="../../assets/images/index/topArrow.png" alt="" class="index-div1-img">-->
            <!--<img v-if="!topArrow" src="../../assets/images/index/botArrow.png" alt="" class="index-div1-img">-->
            <!--</div>-->
            <!--<span>0</span>-->
            <!--</div>-->
          </div>
        </li>
        <li>
          <p class="index-div1-p">今日上课人数</p>
          <div class="index-div1-div">
            <h1 class="index-div1-h1">{{ studyNumToday }}</h1>
            <!--<div class="index-div1-imgDiv">-->
            <!--<div>-->
            <!--<img v-if="topArrow" src="../../assets/images/index/topArrow.png" alt="" class="index-div1-img">-->
            <!--<img v-if="!topArrow" src="../../assets/images/index/botArrow.png" alt="" class="index-div1-img">-->
            <!--</div>-->
            <!--<span>0</span>-->
            <!--</div>-->
          </div>
        </li>
        <li>
          <p class="index-div1-p">已获证人数</p>
          <div class="index-div1-div">
            <h1 class="index-div1-h1">{{ certificateNum }}</h1>
            <!--<div class="index-div1-imgDiv">-->
            <!--<div>-->
            <!--<img v-if="topArrow" src="../../assets/images/index/topArrow.png" alt="" class="index-div1-img">-->
            <!--<img v-if="!topArrow" src="../../assets/images/index/botArrow.png" alt="" class="index-div1-img">-->
            <!--</div>-->
            <!--<span>0</span>-->
            <!--</div>-->
          </div>
        </li>
        <li>
          <p class="index-div1-p">未获证人数</p>
          <div class="index-div1-div">
            <h1 class="index-div1-h1">{{ unCertificateNum }}</h1>
            <!--<div class="index-div1-imgDiv">-->
            <!--<div>-->
            <!--<img v-if="topArrow" src="../../assets/images/index/topArrow.png" alt="" class="index-div1-img">-->
            <!--<img v-if="!topArrow" src="../../assets/images/index/botArrow.png" alt="" class="index-div1-img">-->
            <!--</div>-->
            <!--<span>0</span>-->
            <!--</div>-->
          </div>
        </li>
      </ul>
    </div>
    <div class="index-div2">
      <div class="index-div2-div">
        <div class="index-div2-imgDiv" @click="getStudentsInfo()"><img class="index-div2-img" src="../../assets/images/index/pay.png" alt=""></div>
        <div class="index-div2-imgDiv" @click="getStudentsInfo()"><img class="index-div2-img" src="../../assets/images/index/infomation.png" alt=""></div>
        <div class="index-div2-imgDiv" @click="getStudentsInfo()"><img class="index-div2-img" src="../../assets/images/index/guanli.png" alt=""></div>
      </div>
      <div class="index-div2-div">
        <div class="index-div2-imgDiv1" onclick="window.open('https://www.yuque.com/docs/share/e7a88a7f-e98b-4e55-984e-2654de6acc89?#','_blank')"><img class="index-div2-img" src="../../assets/images/index/zhinan.png" alt=""></div>
        <div class="index-div2-imgDiv1" @click="getStudentsInfo()"><img class="index-div2-img" src="../../assets/images/index/daoru.png" alt=""></div>
        <!--<div class="index-div2-imgDiv1" @onclick="window.open('https://rl-pri.oss-cn-shenzhen.aliyuncs.com/md/other/2020/7/2020-07-13/1594649307207_040.xls')"><img class="index-div2-img" src="../../assets/images/index/muban.png" alt=""></div>-->
        <div class="index-div2-imgDiv1" > <a href="https://rl-pri.oss-cn-shenzhen.aliyuncs.com/md/other/2020/7/2020-07-26/1595769036013_720.xls"><img class="index-div2-img" src="../../assets/images/index/muban.png" alt=""></a></div>
        <div class="index-div2-imgDiv1" @click="getOrderInfo()" ><img class="index-div2-img" src="../../assets/images/index/dingdan.png" alt=""></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { queryInfo } from '@/api/home'
  import CountTo from 'vue-count-to'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
    name: 'Index',
    components: {
      CountTo,
      Pagination
    },
    data() {
      return {

        studentNum: 0, // 培训人数
        studyNumToday: 0, // 今日上课人数
        counselorName: '', // 顾问名字
        counselorPhone: '', // 顾问名字
        payPeopleNum: 0, // 已经付费人数
        unPayPeopleNum: 0, // 待付费人数
        certificateNum: 0, // 已获证人数
        unCertificateNum: 0, // 未获证人数/未通过人数
        completeInfo: undefined, // 是否完善信息。0未完善，1已完善
        ifAdmin: undefined, // 1超级管理员或者培训端管理员 0企业端

        topArrow: true,
        initPara: {
          companyId: undefined
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      // 初始化参数
      init: function() {
        this.getList()
      },
      getList() {
        queryInfo().then(response => {
          this.studentNum = response.data.data.studentNum // 培训人数
          this.studyNumToday = response.data.data.studyNumToday// 今日上课人数
          this.counselorName = response.data.data.counselorName// 顾问名字
          this.counselorPhone = response.data.data.counselorPhone // 顾问名字
          this.payPeopleNum = response.data.data.payPeopleNum // 已经付费人数
          this.unPayPeopleNum = response.data.data.unPayPeopleNum // 待付费人数
          this.certificateNum = response.data.data.certificateNum// 已获证人数
          this.unCertificateNum = response.data.data.unCertificateNum // 未获证人数/未通过人数
          this.completeInfo = response.data.data.completeInfo // 是否完善信息。0未完善，1已完善
          this.ifAdmin = response.data.data.ifAdmin // 是否完善信息。0未完善，1已完善
          if (this.ifAdmin===0){  //培训端跳转
            this.completeInfoFun()
          }

        })
      },
      completeInfoFun() {
        if (this.completeInfo === 0) {
          this.$confirm('您的信息未完善, 是否跳转完善信息页面', '提示', {
            showClose: false,
            showCancelButton: false,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.getCompleteInfo()
            this.$message({
              type: 'success',
              message: '跳转完善信息页面'
            })
          }).catch(() => {
            this.getCompleteInfo()
            // this.$message({
            //
            //   type: 'info',
            //   message: '跳转失败'
            // })
          })
        }
      },
      getStudentsInfo() {
        this.$router.push({ path: '/companyOperateManage/companyStudentList' })
      },
      getOrderInfo() {
        this.$router.push({ path: '/companyOperateManage/companyOrder' })
      },
      getCompleteInfo() {
        this.$router.push({ path: '/companyOperateManage/completeInfo' })
      },
      getGuide() {
        this.$router.push({ path: ' https://www.yuque.com/docs/share/e7a88a7f-e98b-4e55-984e-2654de6acc89?#' })
      }
    }
  }
</script>

<style scoped>
  *{
    padding:0;
    margin:0;
  }
  ul li{
    list-style: none;
  }
  img{
    display: block;
  }
  .index{
    width:100%;
    background-color: #f2f2f2;
    height: 100%;
  }
  .index-div{
    background-color: #fff;
    padding-left: 8%;
    padding-right: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 15px;
  }
  .index-div-div{
    width: 20%;
  }
  .index-div-img{
    width:100%  ;
  }
  .index-div-div1{
    display: flex;
  }
  .index-div-p{
    font-size: 12px;
    color:#595959;
    margin-top: 10%;
  }
  .index-div-p1{
    margin-left: 60px;
  }
  .index-div-div2{
  }
  .index-div-div3{
    width:60%;
    margin: 0 auto;
    margin-top: 20px;
  }
  .index-div-img1{
    width:50%  ;

    display: block;
    margin:0 auto;
    margin-bottom: 10px;
  }
  .index-div-p2{
    font-size: 12px;
    color: #404040;
    text-align: center ;
  }
  .index-div1{
    padding:33px 8%;
    background-color: #fff;
  }
  .index-div1 ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .index-div1 ul li{
  }
  .index-div1-div{
    display: flex;
    margin-top:9px;
  }
  .index-div1-imgDiv{
    display: flex;
    margin-left: 14px;
    align-items: center;
  }
  .index-div1-p{
    font-size: 12px;
    color: #262626;

  }
  .index-div1-h1{
    color: #262626;
    font-size: 21px;
  }
  .index-div1-img{
    width:7px;
  }
  .index-div1-imgDiv span{
    font-size: 14px;
    color: #808080;
    font-weight: bold;
  }
  .index-div2{
    padding:36px 8%;
  }
  .index-div2-div{
    display: flex;
    justify-content: space-between;
  }
  .index-div2-imgDiv{
    width: 33%;
    margin-bottom: 5px;
  }
  .index-div2-img{
    width: 100%;
  }
  .index-div2-imgDiv1{
    width:24.6%;
  }
</style>
